<template>
  <div style="height: 400px">
    <el-row>
      <el-button
        size="mini"
        icon="el-icon-refresh"
        plain
        type="primary"
        @click="saveData()"
        :disabled="!zIsOpenData"
        >保存</el-button
      >
      <el-button size="mini" plain type="warning" @click="openData()"
        >刷新</el-button
      >
      <el-button size="mini" plain type="danger" @click="closeForm()"
        >关闭</el-button
      >
    </el-row>
    <div style="height: 15px"></div>
    <el-form ref="form" :model="FWXMenu" label-width="100px">
      <el-form-item label="菜单类型">
        <el-select v-model="FWXMenu.FMenuType" placeholder="请选择">
          <el-option
            v-for="item in FMenuTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span style="float: left">{{ item.label }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item.value
            }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单名称">
        <el-input
          v-model="FWXMenu.FMenuName"
          placeholder="必需的参数"
        ></el-input>
      </el-form-item>
      <template v-if="FWXMenu.FMenuType == 'click'">
        <el-form-item label="菜单键值">
          <el-input v-model="FWXMenu.FMenuKey"></el-input>
        </el-form-item>
      </template>
      <template v-if="FWXMenu.FMenuType == 'view'">
        <el-form-item label="菜单URL">
          <el-input v-model="FWXMenu.FMenuUrl"></el-input>
        </el-form-item>
      </template>
      <el-form-item label="上级菜单">
        <el-cascader
          v-model="FWXMenu.tempPMenuID"
          :options="FElmDataTree"
          :props="{ checkStrictly: true }"
          filterable
          clearable
          placeholder="单击选择"
          size="medium"
        ></el-cascader>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { constHelper } from "@/baselib/module/BaseClass";
import BaseForm from "../BaseForm";
import elmHelper, { IElmTreeData } from "../model/elmHelper";
import WXAdminApi, { TWXMenu } from "@/baselib/module/weixin/WXAdminApi";

//配合着用
@Options({
  data() {},
  methods: {},
})
export default class TFormWXMenuEdit extends BaseForm {
  public FWXMenu: TWXMenu = new TWXMenu();
  private FMenuList: TWXMenu[] = [];
  private FMenuTypeList: any[] = constHelper.TMYWXMenuType;
  private FElmDataTree: IElmTreeData[] = [];
  public created() {
    this.zIsOpenData = false;
    this.FWXMenu = this.zContextParams.wxMenu;
    this.FMenuList = this.zContextParams.menuList;
    //转化成级联选择器
    this.FElmDataTree = elmHelper.dataToElmTree(
      this.FMenuList,
      "FMenuID",
      "FPMenuID",
      "FMenuName",
      "FMenuID"
    );
    this.openData();
  }
  private async openData() {
    this.zIsOpenData = false;
    if (this.$myStrHelper.stringIsEmptyYW(this.FWXMenu.FMenuID)) {
      //新建不需要去打开数据
      this.zIsOpenData = true;
      return;
    }
    //编辑重新打开数据
    let lResult = await WXAdminApi.GetWXMenuByMenuID(this.FWXMenu.FMenuID);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FWXMenu = lResult.resultData;
    this.FWXMenu.tempPMenuID = this.FWXMenu.FPMenuID;
    this.$myMsgHelp.msgHintAutoClose("获取数据成功");
    this.zIsOpenData = true;
  }
  private async saveData() {
    if (this.FWXMenu.tempPMenuID == null) {
      this.FWXMenu.FPMenuID = "";
    } else if (this.FWXMenu.tempPMenuID instanceof Array) {
      let temp = this.FWXMenu.tempPMenuID[this.FWXMenu.tempPMenuID.length - 1];
      if (this.FWXMenu.FMenuID == temp) {
        this.FWXMenu.tempPMenuID = this.FWXMenu.FPMenuID;
      } else {
        this.FWXMenu.FPMenuID = temp;
      }
    }
    let lResult = await WXAdminApi.SaveWXMenu(this.FWXMenu);
    if (!lResult.resultSuccess) {
      this.$myMsgHelp.msgDialog(lResult.resultMsg);
      return;
    }
    this.FWXMenu = lResult.resultData;
    this.FWXMenu.tempPMenuID = this.FWXMenu.FPMenuID;
    this.$myMsgHelp.msgHintAutoClose("保存成功");
  }
  private closeForm() {
    if (this.zContextOnCall != undefined) {
      this.zContextOnCall("close", this.FWXMenu);
    }
  }
}
</script>

<style>
</style>